<template>
  <div class="block">
    <el-cascader
      :value="value"
      :options="options"
      :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
      @change="handleChange"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
import { getDepartmentList } from "@/api/department";
import { transListToTreeData } from "@/utils";
export default {
  name: "SelectTree",
  props: {
    value: Number,
    default: null
  },
  data() {
    return {
      // SelectDepts: [],
      options: [],
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    async getDepartmentList() {
      this.options = transListToTreeData(await getDepartmentList(), 0);
    },
    handleChange(value) {
      console.log("1111111", value);
      if (value.length) {
        this.$emit("input", value.at(-1));
      } else {
        this.$emit('input', null)
      }
    },
    
  },
};
</script>
